/*
 * @Author: yangzonglong
 * @Date: 2021-01-25 13:22:50
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-07-12 15:25:39
 * @Auditor: 
 */
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { BrowserRouter } from 'react-router-use-history'
import { CSSTransition } from 'react-transition-group';
import history from './history';
import routes from './routes';
import Layout from './layout/Layout';
import Result from './../components/result/Result';
import './app.scss';
import $app from './$app';

(window as any).$app = $app;

const Result404 = () => (
  <div className='common-block common-flex common-center'>
    <Result code={404} />
  </div>
);

const element = (
  <Routes>
    <Route path="/" element=<Layout /> >
      {routes.map(item => (
        <Route key={item.path} path={item.path} element=
        <CSSTransition
          in={true}
          timeout={0}
          classNames='routeAnimation'
          unmountOnExit
          appear>
          <div className='routeAnimation'><item.component /></div>
        </CSSTransition> />
      ))}
      <Route path='*' element=<Result404 /> />
    </Route>
  </Routes>
)

function App() {
  return (
    <BrowserRouter history={history}>
      {element}
  </BrowserRouter>
 );
}

export default App;
